import React from 'react';
import {
  Draggable,
  DraggableProvided,
  DraggableStateSnapshot,
} from 'react-beautiful-dnd';
import { useSelector } from 'react-redux';
import cls from 'classnames';
import { RootState } from 'store';
import style from './index.module.scss';

interface DragRowProps {
  index: number;
  rowId: string;
}

const DragRow: React.FC<DragRowProps> = (props) => {
  const { index, rowId } = props;
  const { rows } = useSelector((state: RootState) => state.dropDrag);
  const isDragDisabled = rowId === 'row-9';
  return (
    <Draggable
      draggableId={rowId}
      index={index}
      isDragDisabled={isDragDisabled}
    >
      {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
        return (
          <div
            {...provided.dragHandleProps}
            {...provided.draggableProps}
            ref={provided.innerRef}
            className={cls(style.root, {
              [style.rootActive]: snapshot.isDragging,
              [style.rootDisabled]: isDragDisabled,
            })}
          >
            <div className="left">
              <img src={rows[rowId]?.imgUrl} alt="avatar" />
            </div>
            <div className="right">
              <div className="right-top">{rows[rowId]?.content}</div>
              <div className="right-bottom">
                <div>{rows[rowId]?.author}</div>
                <div>id:{rows[rowId]?.id}</div>
              </div>
            </div>
          </div>
        );
      }}
    </Draggable>
  );
};
DragRow.displayName = 'DragRow';
export default DragRow;
